<template>
  <div class="order-item" @click="linkFun">
    <div class="order-item_content">
      <div class="order-item_left">
        <div class="order-item_headimg">
          <img :src="headImg" alt srcset>
        </div>
        <div class="order-item_text">
          <div>
            <span>昵称：{{userName}}</span>
            <template v-if="![5,6].includes(Number(status))">
            <span
              v-if="typeShow"
              class="act-type"
              :class="{'act-bule':[2,3].includes(Number(status))}"
            >{{status|getstutas}}</span>
            </template>
          </div>
          <div>
            <span>金额：{{price}}</span>
          </div>
          <div>
            <span>数量：{{amount}}</span>
          </div>
        </div>
      </div>
      <div class="order-item_right">
        <template v-if="[5,6].includes(Number(status))">
           <div class="order-item_time">{{status|getstutas}}</div>
        </template>
        <template v-else>
           <div class="order-item_time" :class="{'stutas-red':type==6}">{{mark}}</div>
           <div class="order-item_stutas"></div>
          <!-- <div class="order-item_stutas" >{{type|getTypes}}</div> -->
         
        </template>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  //接收父级传递的参数
  props: {
    headImg: {
      type: String,
      default: () => {
        return "";
      }
    },
    userName: {
      type: String,
      default: () => {
        return "";
      }
    },
    price: {
      type: [String, Number],
      default: () => {
        return "";
      }
    },
    amount: {
      type: [String, Number],
      default: () => {
        return "";
      }
    },
    type: {
      type: [String, Number],
      default: () => {
        return "";
      }
    },
    times: {
      type: [String, Number],
      default: () => {
        return "";
      }
    },
    typeShow: {
      type: Boolean,
      default: false
    },
    status: {
      type: [String, Number],
      default: () => {
        return "";
      }
    },
    mark: {
      type: [String, Number],
      default: () => {
        return "";
      }
    },
    to: {
      type: String,
      default: () => {
        return "";
      }
    }
  },
  //监听数据变化
  watch: {},
  data() {
    return {};
  },
  filters: {
    getstutas(value) {
      let msg = ["", "挂卖", "挂买", "买入", "卖出", "已完成", "待匹配"];
      return msg[Number(value)];
    },
    getTypes(value) {
      let msg = [
        "",
        "等待卖家确认收款",
        "请付款",
        "请确认收款",
        "等待买家付款",
        "交易成功",
        "交易失败"
      ];
      return msg[Number(value)];
    }
  },
  //实例初始化之前触发事件
  beforeCreate() {},
  //实例化之后触发事件
  created() {},
  //实时监控data参数数据变化
  computed: {},
  //模板组件
  components: {},
  //执行方法
  methods: {
    linkFun() {
      if (this.to) {
        this.$router.push(this.to);
      }
    }
  },
  mounted() {}
  //路由退出时候调用
  //beforeRouteLeave(to, from, next){next()}
};
</script>

<style scoped lang="less">
.order-item {
  border-bottom: 1px solid #dededd;
  padding: 0.5rem 1rem;
  background: #fff;
  font-size: 14px;
  .order-item_content {
    display: flex;
    justify-content: space-between;
    .order-item_left {
      display: flex;
      justify-content: flex-start;
      .order-item_headimg {
        width: 3.75rem;
        height: 3.75rem;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .order-item_text {
        margin-left: 1rem;
        .act-type {
          background: red;
          color: #fff;
          padding: 0.2rem 0.4rem;
          border-radius: 4px;
          font-size: 12px;
          &.act-bule {
            background: #3178ff;
          }
        }
      }
    }
    .order-item_right {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .stutas-red {
        color: red;
      }
    }
  }
}
</style>
